<script>
/**
 * 奖品
 */
Vue.component('el-prize', {
    template: `
    <div class="el-prize">
        <el-table style="cursor: move;" :data="list" ref="table">
            <el-table-column prop="cover" label="奖品图片">
                <template slot-scope="scope">
                    <el-image 
                        style="max-width: 50px"
                        :src="scope.row.cover" 
                        :preview-src-list="[scope.row.cover]">
                        <div slot="error" class="image-slot">
                            <img class="error-image" src="/admin/images/error.png"/>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="奖品名称"></el-table-column>
            <el-table-column prop="type" label="奖品类型">
                <template slot-scope="scope">
                    {{type(scope.row.type)}}
                </template>
            </el-table-column>
            <el-table-column prop="tips" label="奖品提示语"></el-table-column>
            <el-table-column prop="number" label="奖品数量"></el-table-column>
            <el-table-column prop="weight" label="奖品权重"></el-table-column>
            <el-table-column label="中奖概率">
                <template slot-scope="scope">
                    {{probability(scope.row.weight)}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <a href="javascript:;" @click="openData(scope.row, scope.$index)">编辑</a>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            top="20px"
            title="奖品设置"
            :visible.sync="dialog"
            width="80%">
            <el-form :model="form" :rules="rules" ref="form" label-width="170px" class="demo-ruleForm">
                <el-form-item label="奖品类型：" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="0">未中奖</el-radio>
                        <el-radio :label="1">优惠券</el-radio>
                        <el-radio :label="2">积分</el-radio>
                        <el-radio :label="3">商品</el-radio>
                        <el-radio :label="4">红包</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.type == 2" label="赠送积分：" prop="prize2">
                    <el-input-number v-model="form.prize2" controls-position="right" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item v-if="form.type == 4" label="赠送红包：" prop="prize4">
                    <el-input-number v-model="form.prize4" controls-position="right" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="奖品名称：" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="奖品图片：" prop="cover">
                    <el-file-select v-model="form.cover"></el-file-select>
                </el-form-item>
                <el-form-item label="奖品数量：" prop="number">
                    <el-input-number v-model="form.number" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="奖品权重：" prop="weight">
                    <el-input-number v-model="form.weight" controls-position="right" :min="0" :max="100"></el-input-number>
                </el-form-item>
                <el-form-item label="中奖提示语：" prop="tips">
                    <el-input v-model="form.tips" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small"  @click="saveData()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    `,
    props: {
        value: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            dialog: false,
            list: this.value,
            form: {},
            index: 0,
            rules: {
                cover: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                title: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                tips: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                number: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                weight: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
            }
        }  
    },
    mounted() {
        let self = this;
        // 拖动排序
        self.sortable = Sortable.create(self.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0],{
            animation: 300,
            forceFallback: true,
            delay: 20,
            onEnd: evt => {
                if (evt.oldIndex !== evt.newIndex) {
                    const targetRow = self.list.splice(evt.oldIndex, 1)[0]
                    self.list.splice(evt.newIndex, 0, targetRow)
                }
            }
        })
    },
    created() {
        if (this.list.length == 0) {
            let list = [];
            for (var i = 0; i <= 7; i++) {
                list[i] = {};
                list[i]['id']      = i + 1;
                list[i]['prize1']  = {};
                list[i]['prize2']  = 1;
                list[i]['prize3']  = {};
                list[i]['prize4']  = 1;
                list[i]['cover']  = '';
                list[i]['title']  = '未中奖';
                list[i]['type']   = 0;
                list[i]['tips']   = '亲亲，再来一次吧！';
                list[i]['number'] = 1;
                list[i]['weight'] = i + 1;
                list[i]['status'] = 1;
            }
            this.list = list;
        }
    },
    methods: {
        openData(row, index) {
            this.form   = JSON.parse(JSON.stringify(row));
            this.index  = index;
            this.dialog = true;
        },
        saveData() {
            let self = this;
            self.$refs.form.validate((valid) => {
                if (valid) {
                    self.$set(self.list, self.index, self.form);
                    this.dialog = false;
                } else {
                    return false;
                }
            });
        },
        type(type) {
            switch (type) {
                case 0:
                    return '未中奖';
                    break;
                case 1:
                    return '优惠券';
                    break;
                case 2:
                    return '积分';
                    break;
                case 3:
                    return '商品';
                    break;   
                case 4:
                    return '红包';
                    break;      
            }
        },
        probability(weight) {
            var arr   = common.arrayColumn(this.list, 'weight');
            var count = arr.reduce(function f(pre, curr){
                return pre + curr;
            });
            return ((weight/count)*100).toFixed(2) + '%';
        },
    },
    watch: {
        list(list) {
            this.value = list;
            this.$emit('input', list);
        },
        value(list) {
            this.list = list;
        }
    },
})
</script>